<template>
    <div class="mainMenu">
        <!--        <el-divider/>-->
        <div class="mainTop">
            <el-icon>
                <Document/>
            </el-icon>
            <span>窗口挂号</span>
        </div>
        <el-divider/>
        <div>
            <el-button type="primary" @click="addPatient">挂号</el-button>
            <el-button type="primary" @click="clearPage">清空</el-button>
        </div>
        <el-divider/>
        <div>
            <span>基本信息</span>
            <table class="base-info">
                <tr>
                    <td>病历号</td>
                    <td>
                        <el-input v-model="patientInfo.caseNumber" placeholder="Please input" disabled/>
                    </td>
                    <td>姓名</td>
                    <td>
                        <el-input v-model="patientInfo.realName" placeholder="请输入姓名"/>
                    </td>
                    <td>性别</td>
                    <td>
                        <el-select v-model="patientInfo.gender" class="m-2" placeholder="请选择">
                            <el-option label="男" value="男"/>
                            <el-option label="女" value="女"/>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td>
                        年龄
                    </td>
                    <td>
                        <div class="age">
                            <el-input v-model="patientInfo.age" placeholder="请输入年龄" class="age-input"/>
                            <el-select v-model="patientInfo.ageType" class="m-2" placeholder="请选择"
                                       @change="console.log(patientInfo.ageType)">
                                <el-option label="年" value="年"/>
                                <el-option label="天" value="天"/>
                            </el-select>
                        </div>
                    </td>
                    <td>出生日期</td>
                    <td>
                        <div class="block">
                            <el-date-picker
                                    v-model="patientInfo.birthday"
                                    type="date"
                                    placeholder="选择日期"/>
                        </div>
                    </td>
                    <td>身份证号</td>
                    <td>
                        <el-input v-model="patientInfo.cardNumber" placeholder="请输入身份证号"/>
                    </td>
                </tr>
                <tr>
                    <td>家庭住址</td>
                    <td colspan="6">
                        <el-input v-model="patientInfo.homeAddress" placeholder="请输入家庭住址（可选）"/>
                    </td>
                </tr>
            </table>
        </div>
        <el-divider/>
        <div>
            <span>挂号信息</span>
            <table class="regist-info">
                <tr>
                    <td>结算类别</td>
                    <td>
                        <el-select v-model="patientInfo.settleCategoryId" class="m-2" placeholder="请选择">
                            <el-option
                                    v-for="item in settleCategoryList"
                                    :key="item.id"
                                    :label="item.settleName"
                                    :value="item.id"
                            />
                        </el-select>
                    </td>
                    <td>看诊日期</td>
                    <td>
                        <el-date-picker
                                disabled
                                v-model="patientInfo.visitDate"
                                type="date"
                                placeholder="Pick a day"/>
                    </td>
                    <td>午别</td>
                    <td>
                        <el-select v-model="patientInfo.noon" class="m-2" placeholder="Select" disabled>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td>
                        挂号科室
                    </td>
                    <td>
                        <el-input v-model="deptmentName" class="m-2" placeholder="请选择"
                                  @click="departmentTable = true">
                        </el-input>
                    </td>
                    <td>号别</td>
                    <td>
                        <el-select v-model="patientInfo.registLevelId" class="m-2" placeholder="请选择"
                                   @change="queryDoc">
                            <el-option
                                    v-for="item in registLevelList"
                                    :key="item.id"
                                    :label="item.registName"
                                    :value="item.id"
                            />
                        </el-select>
                    </td>
                    <td>看诊医生</td>
                    <td>
                        <el-select v-model="patientInfo.employeeId" class="m-2" placeholder="请选择">
                            <el-option
                                    v-for="item in empList"
                                    :key="item.id"
                                    :label="item.realname"
                                    :value="item.id"
                            />
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td>初始号额</td>
                    <td>
                        <el-input v-model="registQuota" placeholder="初始号额" disabled/>
                    </td>
                    <td>已用号额</td>
                    <td>
                        <el-input v-model="usedRegistQuota" placeholder="已用号额" disabled/>
                    </td>
                    <td>病历本</td>
                    <td>
                        <el-switch
                                v-model="patientInfo.isBook"
                                active-text="是"
                                inactive-text="否"
                                active-value="是"
                                inactive-value="否"
                                @change="isBook"
                        />
                    </td>
                </tr>
                <tr>
                    <td>应收金额</td>
                    <td>
                        <el-input v-model="patientInfo.registMoney" placeholder="应收金额" disabled/>
                    </td>
                    <td>收费方式</td>
                    <td colspan="3">
                        <el-select v-model="patientInfo.registMethod" class="m-2" placeholder="请选择">
                            <el-option
                                    v-for="item in registMethodList"
                                    :key="item"
                                    :label="item"
                                    :value="item"
                            />
                        </el-select>
                    </td>
                </tr>
            </table>
        </div>
        <el-drawer
                v-model="departmentTable"
                title="请选择科室"
                direction="rtl"
                size="50%"
                @open="queryAllDepartment">
            <el-table :data="departmentList" style="width: 100%">
                <el-table-column label="科室ID" prop="deptCode"/>
                <el-table-column label="科室名称" prop="deptName"/>
                <el-table-column label="科室种类" prop="deptType"/>
                <el-table-column align="right">
                    <template #header>
                        <el-input v-model="search" size="small" placeholder="Type to search"/>
                    </template>
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row);queryRegistLevel()">
                            选择
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-drawer>
    </div>
</template>

<script setup>
import axios from "axios";
import {provide} from 'vue'
import {Document} from "@element-plus/icons-vue";
import {computed, ref} from 'vue'
// axios的基础url
axios.defaults.baseURL = "http://localhost:8092/"
provide("axios", axios)


const departmentTable = ref(false)
new Date();
//患者信息
const patientInfo = ref({
    caseNumber: '',
    realName: '',
    gender: '男',
    cardNumber: '',
    birthday: '',
    age: '',
    ageType: '年',
    homeAddress: '',
    visitDate: Date.now(),
    noon: '',
    deptmentId: '',
    employeeId: '',
    registLevelId: '',
    settleCategoryId: '',
    isBook: false,
    //收费方式
    registMethod: '',
    visitState: '',
    registMoney: 1
})
const registMethodList = ref([
    '医保卡', '现金', '微信', '支付宝'
])
const search = ref('')
const registLevelList = ref([])
//科室列表
const departmentList = ref([])
//科室名称
const deptmentName = ref("")
//排班信息
const schedulingInfo = ref({})
//医生列表
const empList = ref([])
//结算类别列表
const settleCategoryList = ref([])
//挂号限额
const registQuota = ref()
//已用号额
const usedRegistQuota1 = ref(0)
const usedRegistQuota2 = ref(0)
const usedRegistQuota3 = ref(0)
const usedRegistQuota = ref(0)
//判断当前午别
if (new Date().getHours() > 12) {
    patientInfo.value.noon = '下午'
} else {
    patientInfo.value.noon = '上午'
}
//查询结算类别
axios({
    method: 'get',
    url: 'settleCategory/querySettleCategoryList'
}).then(resp => {
    settleCategoryList.value = resp.data.data
})

// 查询所有科室
function queryAllDepartment() {
    axios({
        method: 'get',
        url: 'department/queryAllDepartment'
    }).then(resp => {
        departmentList.value = resp.data.data
    })
}

//选择科室信息
function handleEdit(val) {
    deptmentName.value = departmentList.value[val].deptName
    patientInfo.value.deptmentId = departmentList.value[val].id
}

//查询挂号等级信息
function queryRegistLevel() {
    axios({
        method: 'get',
        url: 'registLevel/queryAllLevel'
    }).then(resp => {
        registLevelList.value = resp.data.data
        querySchedulingId()

    })
}

//查询排班信息
function querySchedulingId() {
    let weekRule = ''
    if (new Date().getDay() == 1 || new Date().getDay() == 3 || new Date().getDay() == 5) {
        if (patientInfo.value.noon == '上午') {
            weekRule = '00100010001000'
        } else {
            weekRule = '00010001000100'
        }
    }
    if (new Date().getDay() == 2 || new Date().getDay() == 4 || new Date().getDay() == 6) {
        if (patientInfo.value.noon == '上午') {
            weekRule = '00001000100010'
        } else {
            weekRule = '00000100010001'
        }
    }
    if (new Date().getDay() == 6 || new Date().getDay() == 0) {
        weekRule = '11000000000011'
    }
    axios({
        method: 'get',
        url: 'scheduling/querySchedulingByRule/' + weekRule
    }).then(resp => {
        schedulingInfo.value = resp.data.data
    })
}

function queryDoc(val) {
    patientInfo.value.registMoney = 0
    axios({
        method: 'get',
        url: 'employee/queryEmpByCondition/' + patientInfo.value.deptmentId + '/' + patientInfo.value.registLevelId + '/' + schedulingInfo.value.id
    }).then(resp => {
        empList.value = resp.data.data
    })
    //根据是否要病历本计算价格
    patientInfo.value.registMoney = registLevelList.value[val - 1].registFee
    if (patientInfo.value.isBook == '是') {
        patientInfo.value.registMoney += 1
    }
    registQuota.value = registLevelList.value[val - 1].registQuota
    if (val == 1) {
        usedRegistQuota.value = usedRegistQuota1.value
    }
    if (val == 2) {
        usedRegistQuota.value = usedRegistQuota2.value
    }
    if (val == 3) {
        usedRegistQuota.value = usedRegistQuota3.value
    }

}

//根据是否要病历本计算价格
function isBook(val) {
    if (val == '是') {
        patientInfo.value.registMoney += 1
    } else {
        patientInfo.value.registMoney -= 1
    }
}

//添加数据到数据库
function addPatient() {
    if (usedRegistQuota.value == registQuota.value) {
        alert("当前号别已达到挂号限额")
        return
    }
    axios({
        method: "post",
        url: 'register/patientRegister',
        data: patientInfo.value
    }).then(resp => {
        if (resp.data.success) {
            alert("挂号成功")
            clearPage()
        }
    })
    if (patientInfo.value.registLevelId == 1) {
        usedRegistQuota1.value += 1
        usedRegistQuota.value = usedRegistQuota1.value
    }
    if (patientInfo.value.registLevelId == 2) {
        usedRegistQuota2.value += 1
        usedRegistQuota.value = usedRegistQuota2.value
    }
    if (patientInfo.value.registLevelId == 3) {
        usedRegistQuota3.value += 1
        usedRegistQuota.value = usedRegistQuota3.value
    }
}

//清空页面
function clearPage() {
    //患者信息
    patientInfo.value = {
        caseNumber: buildShortUUID(),
        realName: '',
        gender: '男',
        cardNumber: '',
        birthday: '',
        age: '',
        ageType: '年',
        homeAddress: '',
        visitDate: Date.now(),
        noon: '',
        deptmentId: '',
        employeeId: '',
        registLevelId: '',
        settleCategoryId: '',
        isBook: false,
        //收费方式
        registMethod: '',
        visitState: '',
        registMoney: 0
    }
    deptmentName.value = null
    registLevelList.value = null
    empList.value = null
}

//生成UUId
function buildShortUUID() {
    let unique = 0
    const time = Date.now()
    const random = Math.floor(Math.random() * 1000000000)
    // eslint-disable-next-line no-undef
    unique++
    return random + unique + String(time)
}

patientInfo.value.caseNumber = buildShortUUID()

</script>

<style scoped>
.mainMenu {
    background-color: #eaeef2;
}

.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.age {
    display: flex;
}

.regist-info {
    width: 100%;
}

.regist-info table {
    width: 100%;
    margin: 15px 0;
    border: 0;
}

.regist-info th {
    font-weight: bold;
    background-color: #c6ebfe;
    color: #2073fe
}

.regist-info, .regist-info th, .regist-info td {
    font-size: 0.95em;
    padding: 1.1vw;
    border-collapse: collapse;
}

.regist-info th {
    border: 1px solid #c6ebfe;
    border-width: 1px
}

.regist-info td {
    border: 1px solid #c6ebfe;
    border-width: 1px
}

.regist-info tr {
    border: 1px solid #ffffff;
}

.regist-info tr:nth-child(odd) {
    background-color: #f7f7f7;
}

.regist-info tr:nth-child(even) {
    background-color: #ffffff;
}

.base-info {
    width: 100%;
}

.base-info table {
    width: 100%;
    margin: 15px 0;
    border: 0;
}

.base-info th {
    font-weight: bold;
    background-color: #c6ebfe;
    color: #2073fe
}

.base-info, .base-info th, .base-info td {
    font-size: 0.95em;
    text-align: center;
    padding: 1.1vw;
    border-collapse: collapse;
}

.base-info th {
    border: 1px solid #c6ebfe;
    border-width: 1px
}

.base-info td {
    border: 1px solid #c6ebfe;
    border-width: 1px
}

.base-info tr {
    border: 1px solid #ffffff;
}

.base-info tr:nth-child(odd) {
    background-color: #f7f7f7;
}

.base-info tr:nth-child(even) {
    background-color: #ffffff;
}

.mainTop {
    padding-top: 1.7vw;
    display: flex;
    align-items: center;
}
</style>